<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">

 <div>
    <button @click="type=1">新闻</button>
    <button @clicK="type=2">体育</button>
    <button @click="type=3">音乐</button>
    <button @clicK="type=4">电影</button>
 </div>
 <div>
    <!-- v-show也是需要接受一个boolean 决定当前元素时display:none还是block -->
    <ul v-show="type===1">
        <li>libobo</li>
        <li>你爱爱爱啊</li>
        <li>鳞骗</li>
    </ul>
    <ul v-show="type===2">
        <li>李波扣篮</li>
        <li>libo kulan</li>
        <li>libo联系</li>
    </ul>
     <ul v-show="type===3">
        <li>七里香</li>
        <li>十里庙</li>
     </ul>
     <ul v-show="type===4">
        <li>詹姆斯半场满天飞</li>
        <li>科比牛逼</li>
        <li>吉尔波特</li>
     </ul>
 </div>
 </div>
 <script>
    Vue.config.productionTip=false;
    const vm =new Vue({
        el:"#app",
        data(){
            return {
                type:1
            }
        }
    })
 </script>
</body>

</html>